<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>AnimeJS库动画效果</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container"></div>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"
      integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script>
      const container = document.querySelector(".container");

      for (var i = 1; i <= 900; i++) {
        const dot = document.createElement("div");
        dot.classList.add("element");
        container.appendChild(dot);
      }
      const grid = [30, 30];

      const dotAll = document.querySelectorAll(".element");
      const animation = anime.timeline({
        targets: dotAll,
        easing: "easeInOutExpo",
        loop: true,
      });

      animation
        .add({
          rotate: function () {
            return anime.random(-360, 360);
          },
          translateY: function () {
            return anime.random(-150, 150);
          },
          translateX: function () {
            return anime.random(-150, 150);
          },
          delay: anime.stagger(100, { grid: grid, from: "" }),
          keyframes: [
            {
              background: "#f00",
            },
            {
              background: "#0f0",
            },
            {
              background: "#f0f",
            },
            {
              background: "#ff0",
            },
            {
              background: "#333",
            },
          ],
        })
        .add({
          rotate: function () {
            return anime.random(-360, 360);
          },
          translateY: function () {
            return anime.random(-150, 150);
          },
          translateX: function () {
            return anime.random(-150, 150);
          },
          delay: anime.stagger(100, { grid: grid, from: "center" }),
          keyframes: [
            {
              background: "#f00",
            },
            {
              background: "#0f0",
            },
            {
              background: "#f0f",
            },
            {
              background: "#ff0",
            },
            {
              background: "#333",
            },
          ],
        })
        .add({
          rotate: function () {
            return anime.random(-360, 360);
          },
          translateY: function () {
            return anime.random(-150, 150);
          },
          translateX: function () {
            return anime.random(-150, 150);
          },
          delay: anime.stagger(100, { grid: grid, from: "center" }),
          keyframes: [
            {
              background: "#f00",
            },
            {
              background: "#0f0",
            },
            {
              background: "#f0f",
            },
            {
              background: "#ff0",
            },
            {
              background: "#333",
            },
          ],
        })
        .add({
          rotate: function () {
            return anime.random(0, 0);
          },
          translateY: function () {
            return anime.random(0, 0);
          },
          translateX: function () {
            return anime.random(0, 0);
          },
          delay: anime.stagger(100, { grid: grid, from: "last" }),
          keyframes: [
            {
              background: "#fff",
            },
            {
              background: "#333",
            },
          ],
        });
    </script>
  </body>
</html>
